Fontes de caractères
Journaux liées à cette note :
Journal du dimanche 01 septembre 2024 à 21:55
J'ai perdu énormément de temps à essayer de passer de ce rendu :
à celui-ci :
De base, j'utilise font-variant-caps: small-caps.
Ensuite, j'ai essayé les paramètres suivants pour obtenir des "lining figures" :
font-variant-numeric: tabular-nums;
font-variant-numeric: oldstyle-nums;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum";
Rien n'y faisait !
J'ai fini par trouver la solution !
J'utilisais le package @fontsource/source-serif-pro or, celui contient des fontes de caractères au format TrueType et non pas OpenType.
$ hexdump -C -n 32 node_modules/@fontsource/source-serif-pro/files/source-serif-pro-latin-200-italic.woff
00000000 77 4f 46 46 00 01 00 00 00 00 5f 4c 00 0e 00 00 |wOFF......_L....|
00 01 00 00 signifie que la fonte de caractères est au format TrueType.
J'ai ensuite installé le package source-serif et cette fois, les Fontes de caractères sont au format OpenType.
$ hexdump -C -n 32 node_modules/source-serif/WOFF2/OTF/SourceSerif4-BoldIt.otf.woff2
00000000 77 4f 46 32 4f 54 54 4f 00 01 47 bc 00 0d 00 00 |wOF2OTTO..G.....|
4f 54 54 4f signifie que la fonte de caractères est au format OpenType.
Avec une fonte de caractères au format OpenType la hauteur des chiffres en small-caps est alignée avec la taille des lettres.
Journal du dimanche 01 septembre 2024 à 17:50
#JaiDécouvert que des fontes de caractères sont distribuées directement via npm.
Par exemple, la police de caractères source-serif utilisé par gwern.net, sous licence SIL Open Font est disponible via ce package npm https://www.npmjs.com/package/source-serif.
En creusant un peu plus le sujet, #JaiDécouvert https://fontsource.org qui est le projet qui semble packager toutes ces polices de caractères sur npm.
Mise en œuvre du module Nginx Brotli
Pour accélérer un peu la vitesse de chargement de https://sklein.xyz et améliorer mon score Lighthouse, j'ai activé la compression Brotli dans nginx.
Voici le dépôt GitHub qui convient le Dockerfile de l'image Docker qui j'utilise : nginx-brotli-docker.
Cette image contient nginx + le module ngx_brotli.
J'en ai profité pour étudier un peu l'histoire de Brotli.
Je découvre que Brotli a été créé par un employé de Google pour accélérer le chargement fontes de caractères :
Google employees Jyrki Alakuijala and Zoltán Szabadka initially developed Brotli in 2013 to decrease the size of transmissions of WOFF web font.
Le support de Brotli semble avoir été ajouté à Firefox en janvier 2016 et à Chrome en avril 2016.
Au sujet de son nom :
Comme pour zopfli, un autre algorithme de compression de Google, Brotli porte le nom d'une viennoiserie suisse. C'est la transcription de Brötli (petit pain en suisse allemand).
Concernant les performances, je lis :
Compared to gzip compression, JavaScript files compressed with Brotli are roughly 15% smaller, HTML files are around 20% smaller, and CSS files are around 16% smaller.
Le changement n'est pas "exceptionnel", mais comment c'est simple à activer, autant en profiter 😉.
Voici ce que cela donne pour le téléchargement de la page https://sklein.xyz/fr/ :
$ curl -s -H "Accept-Encoding: gzip" -o /dev/null -w "%{size_download}\n" https://sklein.xyz/fr/
5566
$ curl -s -H "Accept-Encoding: br" -o /dev/null -w "%{size_download}\n" https://sklein.xyz/fr/
4846